<template>
    <div class="icontent">
        <p class="my-title">STEAM海外研学</p>
        <div class="out-content" v-for="(data,index) in user_data.journeys" :key="index">
            <p class="my-day">DAY{{ index + 1 }}-{{ data['activity.studyTravel.name'] }}</p>
            <p class="my-siwei">{{ data['activity.studyTravel.remark'] }}</p>
            <div class="my-addr">
                <div class="my-img"><img class="my-img-img" src="../static/icon/addr.png" alt=""></div>
                <div class="my-addr-nei">{{ data['activity.studyTravel.address_zh'] }} {{ formartDate(data['activity.start_time']) }}</div>
            </div>
            <div class="my-allimg">
                <div class="my-nei-img0" v-for="(img_data,img_index) in data.imgs" v-if="img_index == 0" :key="img_index"><img class="my-img-img" :src="img_data" alt=""></div>
                <div class="my-nei-img1">
                    <div class="my-pubu" v-for="(img_data,img_index) in data.imgs" v-if="img_index > 0" :key="img_index"><img class="my-pubu-img" :src="img_data" alt=""></div>
                    <!-- <div class="my-pubu"><img class="my-pubu-img" src="../static/icon/002.jpg" alt=""></div>
                    <div class="my-pubu"><img class="my-pubu-img" src="../static/icon/002.jpg" alt=""></div>
                    <div class="my-pubu"><img class="my-pubu-img" src="../static/icon/002.jpg" alt=""></div>
                    <div class="my-pubu"><img class="my-pubu-img" src="../static/icon/002.jpg" alt=""></div> -->
                    <!-- <div class="my-img1-out0">
                        <div class="my-img1-nei0"><img class="my-img-img" src="../static/icon/002.jpg" alt=""></div>
                        <div class="my-img1-nei1"><img class="my-img-img" src="../static/icon/002.jpg" alt=""></div>
                    </div>
                    <div class="my-img1-out1">
                        <div class="my-img1-nei3"><img class="my-img-img" src="../static/icon/002.jpg" alt=""></div>
                        <div class="my-img1-nei2"><img class="my-img-img" src="../static/icon/002.jpg" alt=""></div>
                    </div> -->
                </div>
            </div>
            <a :href="data.zip">下载图片</a>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { getTour } from '@/api/login'

    export default {
        name: "useraccount",
        data () {
            return {
                user_data: {},
                id: this.$route.params && this.$route.params.id
            }
        },
        methods: {
            gettourinfo (id) {
                getTour(id).then(response => {
                    var data = response
                    this.user_data = data[0]
                    console.log('定位')
                    console.log(this.user_data)
                }).catch(error => {
                    console.log(error)
                })
            },
            formartDate(param) {
                let date = new Date(param);
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D;
            }
        },
        created: function() {
            console.log(this.id)
            this.gettourinfo(this.id)
        }
    }
</script>

<style scoped>
    body{
        background-color: #F5F5F5 !important;
    }
    .icontent{
        width: 90%;
        margin: 0 5% 0 5%;
    }
    .out-content{
        width: 100%;
        margin-bottom: 50px;
    }
    .my-addr{
        overflow: hidden;
        margin-top: 8px;
    }
    .my-title{
        margin: 0;
        padding: 0;
        font-size: 18px;
        margin-top: 15px;
    }
    .my-day{
        margin: 0;
        padding: 0;
        font-size: 14px;
        margin-top: 14px;
    }
    .my-siwei{
        margin: 0;
        padding: 0;
        font-size: 10px;
        margin-top: 8px;
    }
    .my-img{
        float: left;
        width: 10px;
        height: 20px;
    }
    .my-img-img{
        width: 100%;
        /* height: 100%; */
    }
    .my-addr-nei{
        margin-left:5px; 
        float: left;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }
    .my-allimg{
        overflow: hidden;
        width: 100%;
        margin-top: 10px;
    }
    .my-nei-img0{
        width: 100%;
        padding: 2.5px;
        box-sizing: border-box;
    }
    .my-nei-img1{
        width: 100%;
        overflow: hidden;
    }
    .my-img1-out0{
        float: left;
        width: calc(50% - 2.5px);
        height: 200px;
    }
    .my-img1-out1{
        float: right;
        width: calc(50% - 2.5px);
        height: 200px;
    }
    .my-img1-nei0{
        width: 100%;
        height: 120px;
        margin-bottom:5px ;
    }
    .my-img1-nei1{
        width: 100%;
        height: 75px;
    }
    .my-img1-nei2{
        width: 100%;
        height: 115px;
    }
    .my-img1-nei3{
        width: 100%;
        height: 80px;
        margin-bottom:5px;
    }
    /* 瀑布流布局 */
    .my-pubu{
        padding: 2.5px;
        float: left;
        width: 50%;
        box-sizing: border-box;
    }
    .my-pubu-img{
        width: 100%;
    }
    a{
        text-decoration:none; 
        color:#333; 
    }
</style>